<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app" style="width: 100%">
    <el-form ref="form" :inline="true" :model="formData" label-width="80px">
        <el-form-item label="企业名称">
            <el-input v-model="formData.companyName" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formData.productName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    label="序号"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="区域"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.companyProvince }}{{ scope.row.companyCity }}{{ scope.row.companyArea }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="企业经营"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.businessScope }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    width="250"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.productList }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="平台状态"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <span style="color:white;margin-left: 10px" :style="scope.row.companyStatus=='on'?'background-color:#67C23A':'background-color:#F56C6C'">{{scope.row.companyStatus=='on'?'已认证':'未认证'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="203"
                    align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toClienteleDetails(scope.row)">管理</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="loadPage"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                formData:{
                    companyName:'',
                    productName:'',
                },
                tableData:[],
                total: 0,//总页数
                currentPage: 1,//当前页数
                pageSize: 5,//每页条数
            }
        },
        methods:{
            toClienteleDetails(row){
                console.log(row.id);
                localStorage.setItem("companyId",row.id);
                location.href='/clientele-details.html';
            },
            //更换每页行数
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(this.currentPage,val);
            },
            onSubmit(){
                this.loadPage(this.currentPage,this.pageSize);
            },
            //分页
            loadPage(current,page){
                if (page==undefined){
                    page=this.pageSize;
                }
                this.currentPage = current;
                axios.post("/SCompanies/"+current+"/"+page,Qs.stringify(this.formData)).then(value => {
                    if (value.data.state==1){
                        this.tableData=value.data.data.records;
                        var str='';
                        value.data.data.records.forEach(function (v) {
                           v.productList.forEach(function (s) {
                               str+=s.pname+"、";
                           });
                           str=str.substring(0,str.lastIndexOf("、"));
                           v.productList=str;
                           str='';
                        });
                        this.total=value.data.data.total;
                        this.currentPage=value.data.data.current;
                        this.pageSize=value.data.data.size;
                    }
                })
            }
        },
        mounted(){
            this.loadPage(1,5);
        }
    })
</script>
</body>
</html>